<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <title>嘀嗒验收小工具</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/x-icon" th:href="@{/favicon.ico?v=2}">
    <link rel="stylesheet" th:href="@{/css/reset.css}" />
    <link rel="stylesheet" th:href="@{/css/index.css}" />
    <link rel="stylesheet" th:href="@{/css/convert.css}" />
    <link rel="stylesheet" th:href="@{/css/tool-info.css}">
  </head>
  <body>
  <div th:replace="header::header"></div>
    <main class="app-main">
      <h2 class="title swagger-title"><img th:src="@{/assets/convert.svg}" alt=""> Swagger转Word</h2>
      <p class="description">接口文档转换</p>
      <section class="swagger-container">
        <div class="swagger-wrap">
          <div class="logo"><img class="img-response" th:src="@{/assets/swagger-logo.svg}" alt=""></div>
          <p class="desc">请输入你的Swagger源</p>
          <div class="search">
            <div class="search-container">
              <span class="prefix">URL</span>
              <input type="text" class="url-input" placeholder="http://swagger-url"/>
              <button type="button" class="analysis">解析</button>
            </div>
            <p>
              <input name="select-file-input" type="file" accept="application/json" hidden/>
              <button class="select-file-button">点击选择文件</button>
              或直接拽文件进来
            </p>
          </div>
          <div class="preview">
            <div class="preview-head">
              <div class="preview-title">效果预览</div>
              <div class="preview-btns">
                <button class="btn reset-to-default-btn">恢复默认模板</button>
                <input name="select-template-input" type="file" accept="text/html" hidden/>
                <button class="btn select-template-btn">更换模板</button>
                <a href="/swagger/word" class="btn generate">生成</a>
              </div>
            </div>
            <div class="preview-content">
              <img class="preview-img" style="display: none" src="">
              <iframe class="preview-iframe" src="">

              </iframe>
            </div>
          </div>
        </div>
      </section>
      <div th:replace="tool-info::toolInfo"></div>
<!--      <section class="guide">-->
<!--        <h2 class="guide-title">如何将Swagger转成接口文档</h2>-->
<!--        <div class="guide-list">-->
<!--          <div class="guide-item"></div>-->
<!--          <div class="guide-item"></div>-->
<!--          <div class="guide-item"></div>-->
<!--        </div>-->
<!--        <p class="guide-more"><a href="#">查看更多</a></p>-->
<!--      </section>-->
    </main>
  </body>
  <script th:src="@{/js/swagger.js}" type="module"></script>
</html>
